<template>
  <div class="page-container">
    </br>
    <div class="toolbar" align="left">
      <el-form
        :model="dataForm"
        :inline="true"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-width="200px"
      >
        <el-row>
          <el-form-item prop="title" label="消息标题:">
            <el-input
              :disabled="info"
              v-model="dataForm.title"
              placeholder="请输入"
              style="width: 900px"
              maxlength="30"
              clearable
            ></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item prop="category" label="消息分类:">
            <el-select clearable filterable v-model="dataForm.category" :disabled="info" placeholder="消息分类" >
              <el-option v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
            </el-select>
          </el-form-item>

        </el-row>
        <el-row>
        <el-form-item prop="enable" label="当前状态:">
          <el-select clearable v-model="dataForm.status" :disabled="info" placeholder="当前状态" >
            <el-option v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        </el-row>

        <el-row>
          <el-form-item prop="descroption" label="消息内容:">
            <el-upload
              class="avatar-uploader"
              :action="imgUpload"
              multiple
              :on-success="uploadSuccess"
              :show-file-list="false"
            ></el-upload>
            <quill-editor
              ref="myTextEditor"
              :disabled="info"
              v-model="dataForm.descroption"
              :options="editorOption"
              style="height:200px;width:1000px;margin-top: -20px"
            />
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item style="padding-left: 300px;padding-top: 50px">
            <el-button type="info" @click="goBack()" :size="size" style="width: 200px;">取消</el-button>
            <el-button
              v-show="!info"
              type="primary"
              :size="size"
              @click="submitForm()"
              style="width: 200px;"
            >保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ direction: "rtl" }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ["link", "image"],
  ["clean"],
];

export default {
  components: {
    KtButton,
    TreeSelect,
    quillEditor,
  },

  data() {
    return {
      categoryOptions: [{
          value: 1,
          label: '系统消息'
        }],
       statusOptions: [{
          value: 1,
          label: '显示'
        }, {
          value: 2,
          label: '不显示'
        }],
      info: false, //查看不能编辑
      categoryList: [],
      imgUpload: "http://139.217.220.198:8094/api/upload",
      size: "small",
      operationType: {},
      dataForm: {
        id: this.$route.query.id,
        title: "",
        category: null,
        region: "",
        enable: "",
        descroption: "",
        status: null,
      },
      dataFormRules: {
        // title:[{required: true, message: '请输入消息标题', trigger: 'blur'}],
        // category:[{required: true, message: '请选择消息分类', trigger: 'change'}],
        //descroption: [{required: true, message: '请输入课程介绍', trigger: 'blur'}],
      },
      editorOption: {
        theme: "snow",
        boundary: document.body,
        modules: {
          toolbar: {
            container: toolbarOptions, //
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
        placeholder: "请输入内容",
        readOnly: false,
      },
    };
  },

  methods: {
    //富文本图片插入
    uploadSuccess(res, file) {
      // 首先获取富文本编辑器的实例
      let quill = this.$refs.myTextEditor.quill;
      // 上传成功所执行
      if (res.code == "0000" && res.data !== null) {
        // 获取光标所在位置

        //富文本编辑器神坑处理
        this.$nextTick(function () {
          quill.enable(true);
          quill.blur();
        });
        // 获取光标所在位置
        let length = this.$refs.myTextEditor.quill.selection.savedRange.index;
        // 插入图片res为服务器返回的数据
        quill.insertEmbed(length, "image", res.data.imgUrl);
        // 光标移动至文本末端
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    // 返回
    goBack() {
      this.$router.push({
        path: "/pages/User/Informations",
      });
    },

    // 提交
    submitForm() {
      let this_ = this;
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this_.dataForm.title == "") {
            this_.$message({
              message: "请输入消息标题！",
              type: "warning",
            });
            return;
          }
          if (this_.dataForm.category == "") {
            this_.$message({
              message: "请选择消息分类！",
              type: "warning",
            });
            return;
          }
          if (this_.dataForm.descroption == "") {
            this_.$message({
              message: "请输入消息内容！",
              type: "warning",
            });
            return;
          }
          let params = Object.assign({}, this_.dataForm);
          this_.utils.request.saveOrUpdateInfomation(params, function (res) {
            if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
              this_.goBack();
            } else {
              this_.$message({ message: "操作失败" + res.msg, type: "error" });
            }
          });
        }
      });
    },

    // 图片上传
    handlePicSuccess: function (res, file) {
      if (res.code == "0000") {
        this.dataForm.imageUrl = res.data.imgUrl;
        let imgUrl = {};
        imgUrl.url = res.data.imgUrl;
        this.picList.push(imgUrl);
      }
    },

    beforeUpload(file) {
      const isLtSize = file.size / 1024 / 1024 < 3;
      if (!isLtSize) {
        this.$message({ message: "图片大小不能超过3M" });

        return false;
      }
      let isSize = true;
      return true || isSize;
    },
    //文件上传数量限制
    handleExceed: function () {
      this.$alert("最多上传一个", "警告", {
        confirmButtonText: "确定",
      });
    },
    //文件移除
    handlePicRemove(file, picList) {
      if (picList && picList.length == 0) {
        this.dataForm.imageUrl = "";
      }
    },
    getInfo() {
      let this_ = this;
      let params = { id: this.$route.query.id };
      this_.utils.request.queryMemberInformationInfo(params, function (res) {
        if (res.code == "0000") {
          this_.dataForm = res.data[0];
          this_.dataForm.category = res.data[0].category;
          this_.dataForm.status = res.data[0].status;
        }
      });
    },
  },

  mounted() {
    if (this.$route.query.id == 0 && !this.$route.query.edit) {
      this.info = false;
    } else if (this.$route.query.edit) {
      this.getInfo();
      this.info = false;
    } else {
      this.getInfo();
      this.info = true;
    }
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
